<template>
  <div class="select">
    <ul v-for="(Type,index) in Types">
      <li @click="select(Type,index)" :class="{'active':index==action}">
        {{Type}}<i :class="iconClass(Type)"/>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name:"Select",
  data(){
    return{
      action:0,
    }
  },
  props:{
    Types:{
      type:Array,
      default:[]
    }
  },
  methods:{
    iconClass(Type){
      if(Type=="综合排序"){
        return "fas fa-caret-down";
      }else if(Type=="筛选"){
        return "fas fa-filter";
      }else {
        return '';
      }
    },
    select(Type,index){
      this.action=index;
      this.$emit("Types",Type,index);
    }
  }
}
</script>

<style scoped>
.select{
  display: flex;
  justify-content: space-around;
}
.select ul{
  font-size: 3.5vw;
  color: gray;
  margin-bottom: 6vw;
}
</style>